import { App } from 'vue'
import xtxSkeleton from './skeleton/index.vue'
import XtxCarousel from './carousel/index.vue'
import XtxMore from './more/index.vue'
import { useIntersectionObserver } from '@vueuse/core'
import defaultImg from '@/assets/images/200.png'
import Bread from './Bread/index.vue'
import BreadItem from './Bread/Item.vue'
import XtxCity from './city/index.vue'
import Numbox from '@/components/numbox/index.vue'
import Button from '@/components/button/index.vue'
export default {
  // vue2: 会传入vue对象
  install(app: App) {
    // 自动执行
    // 全局注册组件
    app.component(xtxSkeleton.name, xtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMore)
    app.component('XtxBread', Bread)
    app.component('XtxBreadItem', BreadItem)
    app.component(XtxCity.name, XtxCity)
    app.component(Numbox.name, Numbox)
    app.component(Button.name, Button)


    // 全局注册指令
    // 参数1: 指令名
    // 参数2: 配置项
    app.directive('lazy', {
      // vue2: inserted
      mounted(el, binding) {
        // el: 当前指令绑定的 dom 元素
        // 当 el 进入 可视区之后给他设置 src 属性
        useIntersectionObserver(el, ([{isIntersecting}]) => {
          if(isIntersecting) {
            el.src = binding.value
          }
        })

        // 对图片进行错误的处理
        // 作用就是图片加载失败时触发
        el.onerror = () => {
          // el.src = ''
          // src 只能设置两种值: 一种是 url 一种是 base64
          el.src = defaultImg
        }
      }
    })
  }
}